import React, {Component} from 'react';
import {Avatar, Button, List, Space} from "antd";
import {LikeOutlined, MessageOutlined, StarOutlined} from "@ant-design/icons";
import {getArticleList} from "../../api/article";

const IconText = ({ icon, text }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);
class MainList extends Component {
  state = {
    articleList: []
  };

  componentDidMount() {
    getArticleList().then(({data})=>{
      this.setState({articleList: data})
    })
  }

  render() {
    let {articleList} = this.state;
    console.log(articleList);
    return (
      <div>
        <div style={{width:1200,margin:'20px auto',textAlign:'right'}}>
          <Button type={'primary'} onClick={()=>{
            this.props.history.push('/main/publish');
          }}>编写博客</Button>
        </div>
        <List
          itemLayout="vertical"
          size="small"
          style={{borderRadius:'4px',padding:'4px',width:1200,margin:'20px auto',backgroundColor:'#fff'}}
          pagination={{
            onChange: page => {
              console.log(page);
            },
            pageSize: 3,
          }}
          dataSource={articleList}
          renderItem={item => (
            <List.Item
              key={item.articleId}
              actions={[
                <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
              ]}
              extra={
                <img
                  width={272}
                  alt="logo"
                  src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
              }
            >
              <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={<a href={'/main/detail/'+item.articleId}>{item.title}</a>}
                description={''}
              />
              {item.summary}
            </List.Item>
          )}
        />
      </div>
    );
  }
}

export default MainList;
